const Message: React.FC = () => {
    return <div>消息提示</div>;
};

import React from 'react';
import Reactdom from 'react-dom/client';
import './index.css';

interface Item {
    root: Reactdom.Root;
    component: HTMLDivElement;
}

const msgList: Item[] = [];

window.onShow = () => {
    const msgContainer = document.createElement('div');
    msgContainer.className = 'message';
    msgContainer.style.top = `${msgList.length * 100}px`;
    document.body.appendChild(msgContainer);

    //关联根组件
    const root = Reactdom.createRoot(msgContainer);
    root.render(<Message />);

    msgList.push({
        root,
        component: msgContainer,
    });

    // setTimeout(() => {
    //     const temp = msgList.find((item) => item.component === msgContainer);
    //     temp!['component']['style'].top = '0px';
    //     setTimeout(() => {
    //         temp!['root'].unmount();
    //         document.body.removeChild(msgContainer);
    //     }, 2500);
    // }, 2000);
};

declare global {
    interface Window {
        onShow: () => void;
    }
}

export default Message;
